<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>氦闪</title>
    <link rel="icon" href="__PUBLIC__/web/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="__PUBLIC__/web/css/public.css">
    <link rel="stylesheet" href="__PUBLIC__/web/css/show.css">
</head>
<body>
<header>
    <include file="Index/header"/>
</header>


<include file="Index/left"/>


<section>
    <div class="ly-content">
        <div class="ly-img">
            <img src="{$info.cover_photo}"/>
            <h4>{$info.product_name}</h4>
            <p>{$info.describe}</p>
        </div>
    </div>
    <div class="ly-mast-show">
        <div class="ly-show-bg"></div>
        <div class="ly-intro ly-sate">
            <h4>{$info.product_name}</h4>
            <volist name="attr" id="vo">
                <ul class="ly-li">
                    <h1>{$vo.attr_name}</h1>
                    <volist name="vo['detail']" id="sub">
                        <li de_id="{$sub.de_id}">
                            <span>{$sub.detail_name}</span>
                        </li>
                    </volist>


                </ul>
            </volist>


            <h2>
                <a href="#option_content">尺码有疑惑？</a>
            </h2>

            <div class="ly-price price">￥{$info.sale_price}</div>

            <div class="ly-submit submit" id="">添加到购物车</div>
            <div class="ly-close"><img src="__PUBLIC__/web/images/close.png"/></div>
        </div>
        <div class="ly-intro">
            <h1 class="ly-li-nver">请选择规格</h1>
            <div class="ly-submit submit" id="">添加到购物车</div>
        </div>
    </div>
        <div class="ly-content">
            <div class="ly-title-show" style="margin-top:40px;" >
                <h1>商品详情</h1>
            </div>
            <div class="ly-show-intro">
                {$info.content}
                <!--<p>新华社天津9月12日电（记者张建新）国家计算机病毒应急处理中心近期通过互联网监测发现，十款违法有害移动应用存在于移动应用发布平台中，其主要危害涉及隐私窃取、恶意传播和流氓行为三类。这些违法有害移动应用具体如下：</p>
                <p><img src="__PUBLIC__/web/images/img_1.png" /></p>-->
            </div>
            <div id="option_content"></div>
            <div class="ly-title-show"  style="margin-top: 100px;">
                <h1>尺码说明</h1>
            </div>
            <div class="ly-show-intro" >
                {$info.option_content}
                <!--<p>新华社天津9月12日电（记者张建新）国家计算机病毒应急处理中心近期通过互联网监测发现，十款违法有害移动应用存在于移动应用发布平台中，其主要危害涉及隐私窃取、恶意传播和流氓行为三类。这些违法有害移动应用具体如下：</p>
                <p><img src="__PUBLIC__/web/images/img_1.png" /></p>-->
            </div>
        </div>


        <div class="ly-content ly-cont">
            <div class="ly-title-show">
                <h1>更多商品</h1>
            </div>
            <ul class="ly-list">
                <volist name="list" id="vo">
                    <li>
                        <a href="{:U('show', ['pro_id' => $vo['pro_id']])}">
                            <img src="{$vo.cover_photo}"/>
                            <h6>新品</h6>
                            <h1> {$vo.product_name}</h1>
                            <p> ¥ {$vo.sale_price}</p>
                        </a>
                    </li>
                </volist>


            </ul>
        </div>

        <include file="Index/footer"/>
</section>

<div class="ly-menu-nav" data-id="1">
    <img src="__PUBLIC__/web/images/icon_menu.png"/>
</div>

</body>
<script src="__PUBLIC__/web/js/jquery.min.js"></script>
<script src="__PUBLIC__/web/js/public.js"></script>

<script>
    //属性数量
    var count = {$count};
    var pro_id = "{$info.pro_id}";

    $(".ly-li").on("click", "li", function () {
        $(this).addClass("ly-cation").siblings().removeClass("ly-cation");
        var cation = $(".ly-li li.ly-cation");
        var length = cation.length;
        var combine_id = '';

        //判断是否选完
        if (length == count) {
            $(".ly-li li.ly-cation").each(function () {
                // console.log($(this).attr('de_id'));
                if ($(this).attr('de_id')) {
                    combine_id += combine_id ? ',' + $(this).attr('de_id') : $(this).attr('de_id')
                }
            })
            // console.log(combine_id);
            var price = getPrice(combine_id);
            // document.getElementById('price').value='￥'+price;
            $('.price').text('￥' + price);//console.log($('#price').text());
        }
    });
    //规格属性价格
    var options = {$option};
    var option_id = '';

    function getPrice(combine_id) {
        for (var i = 0; i < options.length; i++) {
            if (options[i].combine_id == combine_id) {
                option_id = options[i].option_id;
                return options[i].price;
            }
            // console.log(options[i].option_name);
        }
    }

    $(".submit").click(function () {
        var cation = $(".ly-li li.ly-cation");
        var length = cation.length;
        console.log(length + ',' + count);

        if (length == count) {
            $.ajax({
                url: "{:U('Cart/addCart')}",
                dataType: "json",
                data: {pro_id: pro_id, option_id: option_id},
                type: 'POST',
                async: true,
                beforeSend: function () {

//                $("body").showLoading();
                },
                success: function (rst) {
                    console.log(rst);
                    if (rst.code == '200') {
                        window.location.reload();
                    } else {
                        alert(rst.mark);
                    }
                },
                error: function () {
//                $("body").hideLoading();
//                    alert("错误");
                }

            });
        }
    })

    $(".ly-li-nver").on("click",function () {
        $(".ly-intro.ly-sate").show();
    })
    $(".ly-sate .ly-submit").on("click",function () {
        $(".ly-intro.ly-sate").hide();
    })
    $(".ly-sate .ly-close").on("click",function () {
        $(".ly-intro.ly-sate").hide();
    })

</script>
</html>





